<template>
  <div class="contact">
    <h1 class="page-title">{{ $t('nav.contact') }}</h1>

    <div class="contact-container">
      <div class="contact-info">
        <h2>{{ $t('contact.getInTouch') }}</h2>
        <p>{{ $t('contact.reachOutText') }}</p>

        <div class="info-items">
          <div class="info-item">
            <el-icon><Location /></el-icon>
            <div>
              <h3>{{ $t('contact.location') }}</h3>
              <p>Your City, Country</p>
            </div>
          </div>

          <div class="info-item">
            <el-icon><Message /></el-icon>
            <div>
              <h3>{{ $t('contact.email') }}</h3>
              <p><a href="mailto:xuyang11710@163.com">xuyang11710@163.com</a></p>
            </div>
          </div>

          <div class="info-item">
            <el-icon><Phone /></el-icon>
            <div>
              <h3>{{ $t('contact.phone') }}</h3>
              <p>+1 234 567 890</p>
            </div>
          </div>
        </div>

        <div class="social-links">
          <a href="#" target="_blank" aria-label="GitHub">
            <el-icon><svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
            </svg></el-icon>
          </a>
          <a href="#" target="_blank" aria-label="LinkedIn">
            <el-icon><svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
            </svg></el-icon>
          </a>
          <a href="#" target="_blank" aria-label="Twitter">
            <el-icon><svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
            </svg></el-icon>
          </a>
        </div>
      </div>

      <div class="contact-form">
        <h2>{{ $t('contact.sendMessage') }}</h2>
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-position="top"
        >
          <el-form-item :label="$t('contact.name')" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item :label="$t('contact.email')" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>

          <el-form-item :label="$t('contact.subject')" prop="subject">
            <el-input v-model="form.subject" />
          </el-form-item>

          <el-form-item :label="$t('contact.message')" prop="message">
            <el-input
              v-model="form.message"
              type="textarea"
              :rows="5"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">
              {{ $t('contact.send') }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElNotification, type FormInstance, type FormRules } from 'element-plus'
import { Location, Message, Phone } from '@element-plus/icons-vue'

const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
  name: '',
  email: '',
  subject: '',
  message: ''
})

// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please enter your name', trigger: 'blur' },
    { min: 2, message: 'Name must be at least 2 characters', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Please enter your email', trigger: 'blur' },
    { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: 'Please enter a subject', trigger: 'blur' },
    { min: 5, message: 'Subject must be at least 5 characters', trigger: 'blur' }
  ],
  message: [
    { required: true, message: 'Please enter your message', trigger: 'blur' },
    { min: 10, message: 'Message must be at least 10 characters', trigger: 'blur' }
  ]
})

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // 这里可以添加实际的表单提交逻辑
      // 例如使用API发送表单数据
      console.log('Form submitted:', form)
      
      // 显示成功消息
      ElNotification({
        title: 'Success',
        message: 'Your message has been sent successfully!',
        type: 'success',
      })
      
      // 重置表单
      formRef.value?.resetFields()
    } else {
      console.log('Form validation failed:', fields)
      ElMessage.error('Please check your form inputs')
    }
  })
}
</script>

<style scoped>
.contact {
  padding: 40px 0;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-info,
.contact-form {
  padding: 30px;
  background-color: var(--el-bg-color-page);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.contact-info h2,
.contact-form h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.contact-info p {
  color: var(--el-text-color-regular);
  line-height: 1.6;
  margin-bottom: 30px;
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.info-item .el-icon {
  font-size: 24px;
  color: var(--el-color-primary);
}

.info-item h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}

.info-item p {
  margin: 0;
}

.info-item a {
  color: var(--el-text-color-regular);
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-item a:hover {
  color: var(--el-color-primary);
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-regular);
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--el-color-primary);
  color: white;
}

@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
}
</style>